<script setup lang="ts">
import { onBeforeMount } from 'vue'
import PhotoSwipe from 'photoswipe'
import PhotoSwipeLightbox from 'photoswipe/lightbox'
import 'photoswipe/style.css'

/* ---- */
const preview = {
  lightbox: null,
  options: {
    pswpModule: PhotoSwipe,
    // ----
    arrowPrev: false,
    arrowNext: false,
    zoom: false,
    close: false
  },
  // ----
  actElement: null,
  addopt: {},
  callback: ''
}

/* ---- */
const getCurrencyInfo = async () => {
  preview.lightbox = new PhotoSwipeLightbox(preview.addopt)
  preview.lightbox.on('uiRegister', () => {
    preview.lightbox.pswp.ui.registerElement({
      name: 'my-close',
      ariaLabel: '自定义关闭按钮',
      order: 9,
      isButton: true,
      html: '返回',
      onClick: (event, el) => { preview.lightbox.pswp.close() }
    })
  })
  preview.lightbox.on('closingAnimationEnd', () => { preview.callback && preview.callback() })
  preview.lightbox.on('destroy', () => { preview.callback = '' })
  preview.lightbox.init()
}
  
/* ---- */
const openPhotoSwipe = (opt) => {
  if (opt) {
    for (const key in opt) { preview[key] = opt[key] }
  }
  // ----
  Object.assign(preview.addopt, preview.options)
  preview.lightbox.options = preview.addopt
  // ----
  const galleryEl = preview.actElement
  preview.lightbox.addFilter('thumbEl', (thumbEl, data, index) => {
    const el = galleryEl.querySelector('img') || galleryEl
    if (el) return el
    return thumbEl
  })
  // ----
  preview.lightbox.loadAndOpen(preview.lightbox.options.index)
}

/* ---- */
onBeforeMount(() => {
  getCurrencyInfo()
})

/* ---- */
defineExpose({
  openPhotoSwipe
})
</script>

<template>
</template>

<style>
/* ---- */
.pswp__top-bar { height: 5rem; }
.pswp__counter { margin: 0 1.4rem; height: 5rem; line-height: 5rem; font-size: 1.4rem; }
.pswp__preloader .pswp__icn { display: none; }
.pswp__button--my-close { width: 6rem; height: 5rem; line-height: 5rem; text-align: center; color: #ffffff; }
.pswp__button--my-close:active { background: rgba(255, 255, 255, 0.1); }
</style>
